<template>
	<view class="tabsContainer" style="background-color: #F7F7F7;">


		<!-- 业务项目-->
		<view class="search_bar">
			<view class="search_left" @click="select()">
				<image src="../../static/client/shaixuan.png" class="search_left_img"></image>
			</view>
			<input @focus="handleFoces" class="search_bar_input" v-model="searchInfo" placeholder="请输入"
				placeholder-class="search_input_text" />
			<view class="all_sousuo_img" @click="handleSearch">
				<image src="../../static/client/sousuo.png"
					style="width: 38rpx;height: 34rpx;margin-top: 20rpx;margin-left: 20rpx;"></image>
			</view>
			<!-- 暂不可用 -->
			<view class="select_query" v-if="false">
				<!-- 日期选择器 -->
				<text class="select_query_text">创建时间</text>
				<picker mode="date" @change="bindStartDateChange" style="width:250rpx ;height: 60rpx;">
					<view class="picker_input">{{ date_start }}</view>
				</picker>
				<view style="width: 15rpx;height: 3rpx; margin-left: 438rpx;margin-top: -30rpx; background: #999999;">
				</view>
				<picker mode="date" @change="bindEndDateChange" style="width:250rpx ;height: 60rpx;">
					<view class="picker_input" style="margin-left: 470rpx;margin-top: -32rpx;">
						{{ date_end }}
					</view>
				</picker>
				<!-- 项目类型 -->
				<view class="select_query_text" style="margin-top: 62rpx;">项目类型</view>
				<input type="text" v-model="projectType" class="select_input" name="input" style="margin-top: -50rpx;"
					placeholder="请输入"
					placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				<!-- 项目类型结束 -->
				<!-- 模糊查询 -->
				<view class="select_query_text" style="margin-top: 62rpx;">模糊查询</view>
				<input type="text" v-model="searchInfo" class="select_input" name="input" style="margin-top: -50rpx;"
					placeholder="请输入"
					placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				<!-- 模糊查询结束 -->
				<!-- 取消确定按钮 -->
				<view style="margin-top: 65rpx;">
					<button class="query_button_cancel" @click="handelCancel" style="">
						取消
					</button>
					<button class="query_button_confirm" @click="handleSearchSlideClick" style="">
						确定
					</button>
				</view>
				<!-- 项目类型下拉列表 -->
				<view class="project_item" v-if="proItemShow">
					<view class="item_info" :class="
								search_project_type == item.project_type_id
									? 'selectSlideItemActive'
									: ''
							" v-for="(item, index) in projectTypeList" :key="item.project_type_id" @tap="tapProItem(item)">
						<text style="margin-left: 21rpx;">{{ item.project_type_name }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选查询框 -->

		<scroll-view scroll-y class="tabsItem tabs1" style="height: calc(100vh - 135rpx);">
			<!-- 筛选查询框结束 -->
			<view class="finnaceList">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="item in tableData6" :key="item" :right-options="options"
						@click="bindClick6(item.id)">
						<view class="listItem" @click="checkItem6(item)"
							style="border-bottom: 4rpx solid #F7F7F7; padding-top: 10rpx;padding-bottom: 20rpx;">
							<view class="itemLine2" style="font-size: 28rpx;">
								{{item.project_name}}
							</view>

							<view class="itemLine2">
								<view class="type">
									<text style="color: #999999">申请人:</text>
									<text style="color: #128BF1;margin-left: 20rpx;">{{item.member.nickname}}</text>
								</view>

								<view class="type rightStatus2 all_flex_row" v-if="item.show_state_people != ''">
									<text>当前处理人:</text>
									<text 
									class="all_text_overflow"
									style="color: #128BF1;margin-left: 10rpx;">{{item.show_state_people}}</text>
								</view>
								<view class="rightStatus2" v-else>
									{{ item.show_state }}
								</view>
							</view>

							<view class="itemLine2">
								<view class="type">
									<text style="color: #999999">时间:</text>
									<text style="color: #128BF1;margin-left: 20rpx;">{{item.show_time}}</text>
								</view>

								<view class="rightStatus2">
									合同金额:
									<text style="color: #FF5A5F;margin-left: 10rpx;" class="overFlowName">
										{{ item.total }}
									</text>
								</view>
							</view>


						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<!-- 加载更多 -->
				<view style="width: 100%;">
					<uni-load-more :status="status6" iconType="auto" @clickLoadMore="getMoreFinnace6">
					</uni-load-more>
				</view>
				<view class="add_client">
					<image src="../../static/client/tianjia.png" style="width: 137rpx;height: 137rpx;"
						@click="handleGoAdd('6')"></image>
				</view>
			</view>
		</scroll-view>
		<!-- 7.合同登记结束 -->
		<!-- </swiper> -->
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cache_department_id: '',
				tableData6: [],
				pageNum6: 0,
				pageSize6: 10,
				currentPage6: 1,
				totle6: 0,
				searchInfo: '',
				projectType: '',
				date_start: '',
				date_end: '',
				financeIndexData: {},
				startDate: '',
				endDate: '',
				select_query: false,
				status6: 'more',
				pageNum: 0,
				token: '',
				member_id: '',
				company_id: '',
				projectFinnaceCurrent: '7',
				projectTypeList: [{
					project_type_id: '1',
					project_type_name: '1'
				}],
				proItemShow: false,
				swiperCurrent: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		onShow() {
			
		},
		onLoad(options) {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.cache_department_id = uni.getStorageSync('cache_department_id') || '';
			this.status6 = 'more';
			this.currentPage6 = 1;
			this.tableData6 = [];
			this.getContractList();
		},
		onPullDownRefresh() {
			this.status6 = 'more';
			this.currentPage6 = 1;
			this.tableData6 = [];
			this.getContractList();
		},
		methods: {
			// 业务项目
			async getContractList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'BProject/bproject',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
 
						// cache_department_id: this.cache_department_id,
						search: this.searchInfo,
						// project_type: this.projectType,
						// date_start: this.date_start,
						// date_end: this.date_end,
						// p: 1,
						// p_count: 10 + this.pageNum5 * 5
						p: this.currentPage6,
						p_count: this.pageSize6
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				// this.tableData6 = res.datas.listInfo;
				this.tableData6 = [...this.tableData6, ...res.datas.listInfo];
				this.totle6 = parseInt(res.datas.count);
			},
			checkItem6(item) {
				if (item.id) {
					uni.navigateTo({
						url: `/packageProject/businessProject/businessProjectDetail?finnaceId=${item.id}`
					});
				}
			},
			// 搜索按钮点击
			handleSearch() {
				uni.showLoading({
					title: '请求中~~'
				});
				this.currentPage6 = 1;
				this.tableData6 = [];
				this.status6 = 'more';
				this.getContractList();
			},
			handleSearchSlideClick() {
				uni.showLoading({
					title: '请求中~~'
				});

				
				this.currentPage6 = 1;
				this.tableData6 = [];
				this.status6 = 'more';
				this.getContractList();
				
				this.select_query = false;
				this.searchInfo = '';
				this.date_start = '';
				this.date_end = '';
				this.projectType = '';
			},
			// 6.删除合同登记
			bindClick6(id, e) {
				uni.showModal({
					title: '提示',
					content: '确定删除此条报销吗？',
					success: async res => {
						if (res.confirm) {
							// 删除
							const {
								data: res
							} = await this.$myRequest({
								url: 'BProject/bproject_del',
								method: 'GET',
								data: {
									member_id: this.member_id,
									token: this.token,
									company_id: this.company_id,

									project_id: id
								}
							});
							if (res.code != 200)
								return uni.showToast({
									title: res.datas.msg,
									icon: 'none'
								});
							uni.showToast({
								title: res.datas.msg,
								icon: 'none'
							});
							this.currentPage6 = 1;
							this.tableData6 = [];
							this.status6 = 'more';
							this.getContractList();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 点击加载更多6
			getMoreFinnace6() {
				if (this.totle6 > this.tableData6.length) {
					this.status6 = 'loading';
					// this.pageNum6++;
					this.currentPage6++;
					this.getContractList(); //执行的方法
					this.status6 = 'more';
				} else {
					//停止加载
					this.status6 = 'noMore';
				}
			},
			// 点击添加
			handleGoAdd(val) {
				uni.navigateTo({
					url:'businessProjectDetail'
				})
			},
			bindStartDateChange(e) {
				this.date_start = e.target.value;
			},
			bindEndDateChange(e) {
				this.date_end = e.target.value;
			},
			handleProItemsShow() {
				this.proItemShow = !this.proItemShow;
			},
			// 点击选择项目类型
			tapProItem(item) {
				console.log(item);
				this.project_name = item.project_type_name;
				this.search_project_type = item.project_type_id;
				this.proItemShow = false;
			},
			handelCancel() {
				this.searchInfo = '';
				this.date_start = '';
				this.date_end = '';
				this.select_query = false;
			},
			// 点击筛选查询按钮显示查询框
			select() {
				this.select_query = !this.select_query;
			},
			// 点击左上返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.itemLine2 {
		position: relative;
		margin-left: 30rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;

		.type {
			font-size: 24rpx;
			color: #999;
		}
	}


	.rightStatus2 {
		font-size: 24rpx;
		color: #999;
		position: absolute;
		left: 380rpx;
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 160rpx;
		text-align: center;
		border-bottom: 2rpx solid #f7f7f7;
	}

	// 导航栏头部点击部分
	.tabsBarHeader {
		display: flex;
		background-color: #fff;

		.barHeaderItem {
			// display: flex;
			display: inline-block;
			justify-content: center;
			align-items: center;
			height: 70rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			box-sizing: border-box;
			text-align: center;
			position: relative;
		}

		.tabsCurrentHeader {
			color: #128bf1;
		}

		.tabsCurrentHeader::before {
			content: '';
			height: 4rpx;
			width: 88%;
			background-color: #40a0f2;
			border-radius: 2rpx;
			position: absolute;
			bottom: 0;
			left: 10rpx;
		}
	}

	// tabs主体区域
	.tabsContainer {
		.tabsItem {
			background-color: #f7f7f7;
			position: relative;

			.finnaceList {

				// height: auto;
				.listItem {
					background-color: #fff;

					.itemTitle {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						min-height: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						padding-top: 35rpx;
						margin-left: 30rpx;
					}

					.itemInfo {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 30rpx;
						margin-bottom: 5rpx;

						.type {
							width: 220rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							margin-left: 30rpx;
						}

						.num {
							width: 200rpx;
							font-size: 24rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.rightStatus {
							width: 250rpx;
							margin-right: 30rpx;
							text-align: right;
						}
					}
				}
			}
		}

		// 2.报销
		.tabs2 {}

		// 1.概览
		.tabs1 {
			margin-top: 20rpx;

			.overviewRow {
				background-color: #fff;

				.rowTitle {
					height: 102rpx;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #efefef;

					.line {
						width: 6rpx;
						height: 42rpx;
						margin-left: 30rpx;
						margin-right: 23rpx;
						background: #40a0f2;
					}

					.titleText {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.rowBody {
					box-sizing: border-box;
					padding: 0 45rpx;
					padding-top: 26rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;




				}
			}
		}
	}

	.add_client {
		width: 137rpx;
		height: 137rpx;
		position: fixed;
		right: 25rpx;
		bottom: 120rpx;
		z-index: 5;
	}

	.swiper_base {
		height: calc(100vh - 108rpx - 128rpx);
		// height: auto;
		// overflow-y: auto;
	}

	.search_bar {
		background-color: #fff;
		width: 100%;
		height: 92rpx;
		position: relative;
		border-bottom: 20rpx solid #f7f7f7;

		.search_bar_input {
			width: 450rpx;
			height: 72rpx;
			background: #f7f7f7;
			border: 1rpx solid #f7f7f7;
			border-radius: 36rpx 0 0 36rpx;
			margin-left: 136rpx;
			position: absolute;
			top: 10rpx;
			font-size: 26rpx;
			padding-left: 20rpx;

			.search_input_text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #b2b2b2;
				line-height: 37px;
				margin-left: 31rpx;
			}
		}

		.search_left_img {
			width: 46rpx;
			height: 36rpx;
			padding: 28rpx 30rpx;
		}

		.search_left {
			width: 106rpx;
			height: 92rpx;
			background: #40a0f2;
		}

		.sousuo_img {
			width: 38rpx;
			height: 34rpx;
			position: absolute;
			top: 28rpx;
			left: 650rpx;
			z-index: 99;
		}
	}

	.select_query {
		width: 100%;
		height: auto;
		background: #fff;
		position: absolute;
		top: 95rpx;
		z-index: 99;
		padding-top: 56rpx;
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);

		.select_query_text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 30rpx;
		}

		.query_button_confirm {
			width: 375rpx;
			height: 80rpx;
			background: linear-gradient(0deg, #40a0f2 0%, #128bf1 100%);
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-radius: 0;
			margin-right: 0;
			margin-top: -80rpx;
		}

		.query_button_cancel {
			width: 385rpx;
			height: 80rpx;
			border-radius: 0px;
			margin-left: 0;
			background: #ffffff;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.picker_input {
			width: 250rpx;
			height: 60rpx;
			background: #ffffff;
			border: 1px solid #dfdfdf;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 60rpx;
			text-align: center;
			margin-left: 170rpx;
			margin-top: -48rpx;
		}

		.select_input {
			width: 530rpx;
			height: 60rpx;
			background: #ffffff;
			border: 1rpx solid #dfdfdf;
			border-radius: 10px;
			margin-left: 170rpx;
			line-height: 60rpx;
			padding-left: 22rpx;
			position: relative;
			font-size: 26rpx;

			.select_input_text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.project_item {
		width: 550rpx;
		height: 296rpx;
		background: #ffffff;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 227rpx;
		right: 25rpx;
		z-index: 999;

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.rightStatus {
		display: flex;
	}

	.overFlowName {
		// display: block;
		width: 100rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
